<template>
  <el-table :data="data || []" border :header-cell-style="headerStyle" v-bind="$attrs">
    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
    <el-table-column v-for="column in columns" :key="column.label" v-bind="column" align="center">
      <template  slot-scope="{row}">
        <div>
          <span>{{row[column.prop]}}</span>
          <el-tag v-if="column.prop==='name' && row.season" effect="dark" size="mini" type="primary">{{row.season}}</el-tag>
          <p v-if="column.prop === 'name'" class="stars">{{'⧫'.repeat(row.star || 0)}}</p>
          <p v-if="column.prop === 'direction'">
            <el-badge is-dot :hidden="row.mainProp !== '功击力'">
              {{row.mainProp}}
            </el-badge>
          </p>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
module.exports = {
  props: {
    data: Array,
    columns: Array,
  },
  data() {
    return {
      headerStyle: { background: "#F5F7FA", color: "#555" },
    }
  }
}
</script>

<style>

</style>